<template>
    <div>
        <div class="body-content">
            <div class="content-main"  v-if="detail">
                <div class="w two-nav">
                    <div class="pro clear" id="Js_pro">
                        <p v-if="detail.country" :style="{'background-image': 'url('+getImage(detail.country.icon)+')'}">
                            <!--<img :src="" style="width:38px;"/>-->
                            {{detail.projectName}}
                        </p>
                        <div class="zhishu"  style="display:flex;align-items:center;">
                            <div class="num">推荐指数</div>
                            <div class="star_5" style="display:flex;margin-left:10px;">
                                <img src="@/assets/image/star.png" style="width: 16px;height: 16px;margin-right:5px;" 
                                v-for="i in detail.recommendIndex" :key="i"/>
                            </div>
                        </div>
                        <a class="Js-zixun adapt-pc" href="javascript:;">马上咨询</a>
                    </div>
                    <div class="position-nav " :class="{fixed: isFixed}" ref="test" >
                        <ul class="clearfix Js-position-box adapt-m"  id="factoryNav">
                            <li class="ck" :class="{v:navIndex1 == 0}" @click="goAnchor1('vital1',0)"><a href="javascript:;">介绍</a></li>
                            <li class="ck" :class="{v:navIndex1 == 1}" @click="goAnchor1('vital2',1)"><a href="javascript:;">优势</a></li>
                            <li class="ck" :class="{v:navIndex1 == 2}"  @click="goAnchor1('vital3',2)"><a href="javascript:;">条件</a></li>
                            <li class="ck" :class="{v:navIndex1 == 3}"  @click="goAnchor1('vital4',3)"><a href="javascript:;">流程</a></li>
                            <li class="btn">
                                <a class="Js-zixun" href="javascript:;">马上咨询</a>
                            </li>
                        </ul>
                        <ul class="clearfix Js-position-box adapt-pc"  id="factoryNav">
                            <li class="ck" :class="{v:navIndex == 0}" @click="goAnchor('vital1',0)"><a href="javascript:;">项目介绍</a></li>
                            <li class="ck" :class="{v:navIndex == 1}" @click="goAnchor('vital2',1)"><a href="javascript:;">项目优势</a></li>
                            <li class="ck" :class="{v:navIndex == 2}"  @click="goAnchor('vital3',2)"><a href="javascript:;">申请条件</a></li>
                            <li class="ck" :class="{v:navIndex == 3}"  @click="goAnchor('vital4',3)"><a href="javascript:;">申请流程</a></li>
                            <li class="ck" :class="{v:navIndex == 4}" @click="goAnchor('vital5',4)"><a href="javascript:;">国家概况</a></li>
                            <li class="btn">
                                <a class="Js-zixun" href="javascript:;">马上咨询</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="pro-detail">
                    <div class="pro-detail-box w Js-position">
                        <div class="asd">
                            <div class="swiper-container swiper-container1">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide" v-for="(item,index) in detail.projectImage" :key="index">
                                        <img :src="getImage(item)"/>
                                    </div>
                                </div>
                                <div class="swiper-pagination"></div>
                            </div>
                        </div>
                        <ul>
                            <li class="no" v-if="detail.country"><span>所属国家</span><p>{{detail.country.name}}</p></li>
                            <li><span>移民类型</span><p>{{detail.immigrateType}}</p></li>
                            <li><span>居住要求</span><p>{{detail.liveRequirement}}</p></li>
                            <li><span>预估周期</span><p>{{detail.expectCycle}}<span style="float: right;margin-left: 15px;color: #5882b2; font-size: 14px;">仅供参考</span></p></li>
                            <li><span>身份卡类别</span><p>{{detail.idCardType}}</p></li>
                            <li>
                                <span>办理费用</span>
                                <p><i>{{detail.handleFee.split('###')[0]}}</i> {{detail.handleFee.split('###')[1]}}</p>
                                <!-- <a href="javascript:;" class="Js-zixun" style="color: #5882b2; font-size: 14px; margin-left: 15px;">获取费用清单</a> -->
                            </li>
                            <li class="off"><span>咨询服务费</span><p><i>{{detail.serviceFee.split('###')[0]}}</i> {{detail.serviceFee.split('###')[1]}}</p></li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                </div>
                <div class="pro-detail2">
                    <div class="w content">
                        <div class="con con1" id="vital1">
                            <div class="title"><b></b>项目介绍</div>
                            <div class="con-padding">
                                <div v-html="detail.detail"></div>
                            </div>
                            
                        </div>
                        <div class="con con2 Js-position" id="vital2">
                            <div class="title"><b></b>项目优势</div>
                            <div class="con-padding">  
                                <div v-html="detail.projectAdvantage"></div>
                            </div>
                          
                            <!--<ul>
                                <li class="yes" style='line-height:24px;background-position: left 2px;margin-bottom:20px;' v-for="(item,index) in projectAdvantage" :key="index">
                                    {{item}}
                                </li>
                            </ul>-->
                        </div>
                        <div class="con con3 Js-position" id="vital3">
                            <div class="title"><b></b>申请条件</div>
                            <div class="con-padding">  
                                <div v-html="detail.applyRequirement"></div>
                            </div>
                            
                            <!--<ul>-->
                                <!--<li class='no' style='line-height:24px;background-position: left 2px;margin-bottom:20px;' v-for="(item,index) in applylist" :key="index">{{item}}</li>-->
                            <!--</ul>-->
                        </div>
                        <div class="con con4 Js-position" id="vital4">
                            <div class="title"><b></b>申请流程</div>
                            <div class="con-padding">  
                                <div v-html="detail.applyProcess"></div>
                            </div>
                            <!--<ul>-->
                                <!--<li class='yes' style='line-height:24px;margin-bottom:20px;' v-for="(item,index) in applyProcess" :key="index"><i>{{index+1}}</i>{{item}}</li>-->
                            <!--</ul>-->
                        </div>

                        <div class="w adapt-m">
                            <div class="con Js-position" style="padding: 40px 20px 12px; border: none;">
                                <div class="title"><b></b>国家概况</div>
                            </div>
                        </div>

                        <div class="min_desc" id="vital5">
                            <h2>{{detail.country.name}}</h2>
                            <ul>
                                <li>
                                    <p>{{detail.country.detail}}</p>
                                    <dl>
                                        <dt>
                                            <span>移民热度</span>
                                            <span>居住环境</span>
                                            <span>投资环境</span>
                                            <span>教育环境</span>
                                            <span>推荐指数</span>
                                        </dt>
                                        <dd>
                                            <span>{{detail.country.immigrateHot}}</span>
                                            <span>{{detail.country.liveEnvironment}}</span>
                                            <span>{{detail.country.investEnvironment}}</span>
                                            <span>{{detail.country.eduEnvironment}}</span>
                                            <span>{{detail.country.recommendIndex}}</span>
                                        </dd>
                                    </dl>
                                </li>
                                <li>
                                    <img :src="getImage(detail.country.geographyImage)" alt="">
                                </li>
                            </ul>
                        </div>
                        
                        <div class="demo_warp" id="my">
                            <ul class="tab_tit">
                                <li :class="n==1?'active':''" @click="n=1">教育</li>
                                <li :class="n==2?'active':''" @click="n=2">生活</li>
                                <li :class="n==3?'active':''" @click="n=3">经济</li>
                                <li :class="n==4?'active':''" @click="n=4">文化</li>
                            </ul>
                            <!-- neirong -->
                            <div class="tab_con">
                                <div v-show="n==1" v-html="detail.country.edu"></div>
                                <div v-show="n==2" v-html="detail.country.life"></div>
                                <div v-show="n==3" v-html="detail.country.economy"></div>
                                <div v-show="n==4" v-html="detail.country.culture"></div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="pro-ava adapt-pc">
                    <ul class="bd-r">
                        <li>
                            <img class="icon3" src="@/assets/picture/custom.png" alt="">
                            <span>定制专属移民方案</span>
                            <p>我们会根据您的条件给出优选方案</p>
                        </li>
                        <li><input type="text" name="nm" value="" placeholder="您的姓名" class="name" v-model="contacts"></li>
                        <li><input type="number" name="ph" value="" placeholder="您的手机号" class="phone" v-model="contactsPhone"><i class="error1 icon-tanhao-copy"></i></li>
                        <li><div class="btn btn-common" @click="save">提交</div></li>
                    </ul>
                </div>
        
            </div>
            <!-- <div class="ft-lo" style="background:url('static/image/5fbc70c226f7d.jpg') no-repeat center center; background-size: cover;">
                <h2>美国移民我们是专业的</h2>
                <p>还有什么移民问题，直接咨询我们</p>
                <a class="Js-zixun" href="javascript:;">马上咨询</a>
            </div> -->

            <div class="click-box" v-if="promptshow">
                <div>
                    <img src="@/assets/image/success.png" alt="" class="dui">
                    <img src="@/assets/image/close.png" alt="" class="cuo xxx" @click="close">
                    <span>您的私人规划师会在2小时内跟您沟通～</span>
                    <p>我们会对您的电话严格保密，请保持电话畅通。<br/>公休假日可能会顺延，请您耐心等候。</p>
                    <em class="xxx" @click="konwbtn">我知道了</em>
                </div>
            </div>
        </div>
        <loading :loadingState="loadingState" />
    </div>
</template>

<script>

import swiper from 'swiper'
import loading from "@/components/loading.vue";
import { getProjectDetail,apply} from '@/api/index'
import { mapGetters } from 'vuex'

export default {
    data() {
        return {
            n:1,
            navIndex:0,
            navIndex1:0,
            id:'',
            detail: null,
            projectAdvantage:[],//项目优势
            applylist:[],//申请条件
            applyProcess:[],//申请流程
            projectImage:[],//轮播图
            isFixed: false,
            offsetTop: 0,
            promptshow:false,
            contacts:'',
            contactsPhone:'',
            navTop:0,
            loadingState: true
        }
    },
    created() {
        this.getDetail(this.$route.query.id);
    },
    mounted() {
        this.$nextTick(()=>{
            let target = document.getElementById("factoryNav");
            this.navTop = target.offsetTop
        })
        window.addEventListener('scroll', this.handleScroll)
    },
    methods: {
        getImage(url){
            return this.baseApi + url;
        },
        handleScroll () {
            let top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            if(top > this.navTop){
                this.isFixed = true
            }else{
                this.isFixed = false
            }
        },
        //锚点跳转
        goAnchor(id,index) {/*参数selector是id选择器（#anchor14）*/
            console.log(id,index,'----')
            this.navIndex = index;
            // document.querySelector(id).scrollIntoView({
            //     behavior: "smooth"
            // });
            let target = document.getElementById(id);
            window.scrollTo({
                top: target.offsetTop  - 30,
                behavior: "smooth"
            });
        },
        goAnchor1(id,index) {/*参数selector是id选择器（#anchor14）*/
            console.log(id,index,'----')
            this.navIndex1 = index;
            // document.querySelector(id).scrollIntoView({
            //     behavior: "smooth"
            // });
            let target = document.getElementById(id);
            window.scrollTo({
                top: target.offsetTop  - 30,
                behavior: "smooth"
            });
        },
        getDetail(id) {
            getProjectDetail(id).then(res => {
                if(res.code == 0){
                    this.detail = res.data;
                    this.detail.projectImage = res.data.projectImage.split("###");
                    this.getSwiper();
                }
                this.loadingState = false;
            })
        },
        getSwiper () {
            setTimeout(() => {
                new swiper('.swiper-container', {
                    loop: true,
                    autoplay: { //自动开始
                        delay: 3000, //时间间隔
                        disableOnInteraction: false, //*手动操作轮播图后不会暂停*
                    },
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true, // 分页器可以点击
                    },
                    effect: "slide",
                    // spaceBetween: 30,
                });
            }, 500)
        },
        konwbtn(){
            this.promptshow = false
            this.$router.go(-1)
        },
        close(){
            this.promptshow = false
        },
        save(){
            if(!this.contacts){
               return this.$message.error( '请输入您的姓名')
            }
            if (!/^1[0-9]{10}$/.test(this.contactsPhone)){
                return this.$message.error( '请输入手机号')
            }
            apply({
                contacts:this.contacts,
                contactsPhone:this.contactsPhone,
            }).then(res => {
                if (res.success) {
                    this.promptshow = true
                    this.$message.success('保存成功')

                }
            })
        },
    },
    name: "ProjectDetail",
    components: {
        loading
    },
    computed: {
        ...mapGetters([ 'baseApi' ])
    },
}
</script>
<style lang="scss" scoped>
    @import "src/assets/css/project-detail";
</style>